<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
        <style>
            .one{
                color:red;
            }
            .two{
                background-color: aquamarine;
            }
        </style>
	</head>
	<body>
        10.****v-bind 绑定属性
        简写 ：
        class
         1. :class="a"  如果a(引号里面又有引号)不加引号----》data
         2. :class="[a,b]"  多个值，必须用数组
         3. :class="true?b:''"  可以写三元运算
         
         data:{
            a:"one",
            b:"two",
         }

         4. :class="{'one':true,'two':false}"  对象的key必须是类名，不能查找data
         css：
            .one{
                color:red;
            }
            .two{
                background-color: aquamarine;
            }
  
        style
         1. :style="{color:'pink',backgroundColor:'blue'}" 是对象
         2. :style="stya"
            data:{
                stya:{
                    color:'pink',
                    backgroundColor:'blue'
                }
            }
        3. :style="[stya,styb]"
            data:{
                stya:{
                    color:'pink',
                    backgroundColor:'blue'
                },
                styb:{
                    border:"10px solid yellow"
                }
            }

		<div id="app">
            <h3 :style="{color:'pink',backgroundColor:'blue'}">333</h3>
            <h3 :style="stya">333</h3>
            <h3 :style="[stya,styb]">333</h3>


            <h2 :class="{'one':true,'two':false}">2222</h2>
            <h2 :class="[a,{'two':true}]">2222</h2>
            
            <h2 :class="[a,true?b:'']">2222</h2>
            <h2 :class="true?b:''">2222</h2>

            <h1 v-bind:title="msg">1111</h1>
            <img :src="mysrc">
		</div>
		<script>
            var vm=new Vue({
				el:"#app",
                data:{
                    msg:"aaaa",
                    mysrc:"./sw-1.jpg",
                    a:"one",
                    b:"two",
                    stya:{
                        color:'pink',
                        backgroundColor:'blue'
                    },
                    styb:{
                        border:"10px solid yellow"
                    }
                }
			})
		</script>
	</body>
</html>
